<template>
  <div class="app-container">
    <el-form v-model="listQuery" :inline="true">
      <el-form-item>
        <el-button type="primary" @click="getList()">查询</el-button>
        <el-button type="primary" @click="openAddPubBankBillDialog">新增线下打款流水记录</el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="listLoading"
      :data="list"
      stripe
    >
      <el-table-column label="ID" prop="id" width="60" />
      <el-table-column label="交易流水" prop="deal_no" />
      <el-table-column label="交易金额" prop="deal_amount" />
      <el-table-column label="交易备注" prop="deal_remark" />
      <el-table-column label="对方名称" prop="other_account_name" />
      <el-table-column label="对方账号" prop="other_account_no" />
      <el-table-column label="对方开户行名称" prop="other_account_open_bank" />
      <el-table-column label="监管账户名称" prop="account_name" />
      <el-table-column label="监管账户账号" prop="account_no" />
      <el-table-column label="监管账户开户行名称" prop="account_open_bank" />
      <el-table-column label="交易时间" prop="deal_time" />
      <el-table-column label="交易类型" prop="deal_type" />
      <el-table-column label="拉取到的数据入库时间" prop="pull_createtime" />
      <el-table-column label="创建时间" prop="createtime" />
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="getList()" />
    <el-dialog
      title="模拟线下打款"
      width="600px"
      :visible.sync="addPubBankBillFormShow"
    >
      <el-form :model="addPubBankBillForm" label-position="left" label-width="160px">
        <el-form-item label="打款账户-银行卡号" required>
          <el-input v-model.trim="addPubBankBillForm.other_account_no" clearable style="width: 400px" />
        </el-form-item>
        <el-form-item label="打款金额" required>
          <el-input v-model.number="addPubBankBillForm.amount" clearable style="width: 400px" />
        </el-form-item>
        <el-form-item label="流水备注" required>
          <el-input v-model.trim="addPubBankBillForm.deal_remark" clearable style="width: 400px" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPubBankBillFormShow = false">取消</el-button>
        <el-button type="primary" @click="addPubBankBill()">立即打款</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import {
  addBill,
  pubBankBillList
} from '@/api/order'
import { Message } from 'element-ui'

export default {
  name: 'OrderList',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        keyword: '',
        state: null,
        page: 1,
        page_size: 10
      },
      addPubBankBillFormShow: false,
      addPubBankBillForm: {
        other_account_no: null,
        amount: null,
        deal_remark: null
      }

    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      pubBankBillList(this.listQuery).then(res => {
        this.list = res.list
        this.total = res.pager.total
        this.listQuery.page = res.pager.page
        this.listQuery.page_size = res.pager.page_size
      }).catch((res) => {})
      this.listLoading = false
    },
    openAddPubBankBillDialog() {
      this.addPubBankBillFormShow = true
    },
    addPubBankBill() {
      addBill(this.addPubBankBillForm).then(res => {
        Message.success('操作成功')
        this.addPubBankBillFormShow = false
      }).catch(res => {})
    }
  }
}
</script>

<style scoped>

</style>
